import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Input, Button, Card, message } from 'antd'
import { UserOutlined, LockOutlined, UserDeleteOutlined } from '@ant-design/icons'
import './index.css'
import request from '../../utils/request'
interface ValuesType {
	email: string,
	name: string
	password: string
}
const Index: React.FC = () => {
	const [form] = Form.useForm()
	const navigate = useNavigate()
	const onFinish = async (values: ValuesType) => {
		try {
			const res = await request.post('/api/v1/auth/register', { ...values })
			console.log(res)
			const { code, data } = res.data
			console.log(code, data)

		} catch (error: any) {
			console.error('登录错误:', error)
			const errorMsg = error.response?.data?.message || '登录失败，请重试'
			message.error(errorMsg)
		}
	}
	const onFinishFailed = (errorInfo: any) => {
		console.log('表单验证失败:', errorInfo)
	}
	return (
		<div className="login-container">
			<Card className="login-card" >
				<Form
					form={form}
					name="login"
					onFinish={onFinish}
					onFinishFailed={onFinishFailed}
					autoComplete="off"
					size="large"
				>
					<Form.Item
						name="email"
						rules={[
							{ required: true, message: '请输入您注册的邮箱账号!' },
							{
								pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
								message: '您输入的邮箱格式不正确 如：zhangsan@example.com'
							}
						]}
					>
						<Input
							prefix={<UserOutlined />}
							placeholder='请输入您注册的邮箱账号'
							className="login-input"
						/>
					</Form.Item>
					<Form.Item
						name="name"
						rules={[
							{ required: true, message: '请输入姓名!' },
						]}
					>
						<Input
							prefix={<UserDeleteOutlined />}
							placeholder='请输入姓名'
							className="login-input"
						/>
					</Form.Item>
					<Form.Item
						name="password"
						rules={[
							{ required: true, message: '请输入密码!' },
							{ min: 6, message: '密码至少6个字符!' }
						]}
					>
						<Input.Password
							prefix={<LockOutlined />}
							placeholder='请输入密码'
							className="login-input"
						/>
					</Form.Item>
					<Form.Item>
						<Button
							type="primary"
							htmlType="submit"
							className="login-button"
							block
						>
							注册
						</Button>
					</Form.Item>
					<Form.Item className="login-links">
						<div className="links-container">
							<Button type="link" onClick={() => navigate('/login')} className="login-link">
								已有账号?去登陆
							</Button>
						</div>
					</Form.Item>
				</Form>
			</Card>
		</div>
	)
}
export default Index